Title with entity tile
canonIdentity of the Section top bar: exactly one of icon, colour tile, avatar, heading dropdown or inline rename.
Rule confirmed in code on meeting detail (acrm !4014, 27 Sep 2026): a record that IS a thing, not an identity, gets the flat `icon` prop (20px, `--fg-secondary`) inherited from its section's menu mark — `MeetingDetailPage.tsx` passes `entityMark(...).icon` from the Kalendář mark, same as Deals/Tasks; no 32px `kind` tile, since a meeting is not a person or a company.
Used in 55 files · 49 areas · 70× — components/PageHeader, components/agent-desk, components/datamart, components/segment, pages/AccountingInvoiceDetailPage, pages/AccountingInvoiceEditPage …
Keyboard
- The static forms (icon, tile, avatar) are text — nothing to focus.
- The dropdown form is a button: Tab reaches it, Enter or Space opens the menu, Escape closes it and returns focus.
- Rename: Enter commits, Escape cancels, blur commits once (a latch prevents Enter-then-blur from saving twice, and Escape-then-blur from resurrecting a cancelled save). Both keys stop propagating so a dialog's Escape or a row's Enter does not fire as well.
- While
renamingthe input is disabled and removed from the tab order, so the user cannot start a second edit over an unfinished save.
ARIA
- The mark (tile, icon, avatar) is decorative; the accessible name is the text next to it.
- The dropdown form carries
aria-expandedthrough the bar's own trigger contract, and its menu is a canonical popover. - Rename mode exposes an input named by
renameAriaLabel(falling back to a sensible default), so a screen reader announces what is being renamed. - The component's dev-only warnings enforce that an identity exists at all — a bar with no mark is a bug, not a variant.
- The title is not a heading element; the page owns its own
<h1>.
Focus
- The dropdown form takes the foundation ring from
ds.css(outline: 2px solid var(--accent)); the tile and avatar are inside the same control, so the ring wraps the whole identity. - Entering rename mode moves focus into the input; committing or cancelling returns it to the name.
Contrast
Computed from packages/ui/src/tokens/tokens.css:
- Name
.tbar-h: ink on--surface-100= 17.59:1 light, 14.53:1 dark. - Tile: the icon sits on its tone tint; the seven tones are the DS tints, each carrying its own ink — all above the 3:1 non-text minimum, and the tile is never the only carrier of meaning.
- Avatar
.nav-pav: initials on a generated hue, with a dark-theme override so the contrast holds in both themes. - Chevron of the dropdown form
--fg-muted= 2.85:1 light — below the 3:1 non-text minimum; the hover surface and the name carry the affordance.
Known limits
- The tone is decorative only: a colour-blind user gets no information from it, which is intended — nothing depends on it.
- The chevron is muted (2.85:1 in light theme).
- Rename has no error state of its own; a failed save has to be reported by the screen.
- A very long name is not truncated, so on a narrow screen the controls after it move out of view (the bar scrolls).
Source: docs/section-top-bar/title-with-entity-tile.a11y.md · GitLab